<template>
  <div class="project-config-page-container">
    <!-- 顶部筛选条件 -->
    <div class="conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <!-- 项目名称 -->
          <a-input v-model="proName" allowClear placeholder="请输入项目名称" />
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getData()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>

    <!-- 主体区域 -->
    <div class="result-container" v-loading="pageLoading">
      <div class="common-result-container-header" header="项目管理"></div>
      <div class="result-body">
        <!-- table -->
        <div class="table-container">
          <vxe-table
            align="center"
            :data="table.source"
            show-overflow
            show-header-overflow
            show-footer-overflow
            show-footer
            :column-config="{ resizable: true }"
            class="scrollbarStyle"
            height="99%"
            :sort-config="{ trigger: 'cell' }"
            ref="xTable"
            :scroll-x="{ gt: 10 }"
            :scroll-y="{ gt: 100 }"
            row-id="id"
            :checkbox-config="{
              reserve: true,
            }"
          >
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column
              :title="item.title"
              :field="item.key"
              :key="index"
              :min-width="item.width"
              show-overflow
              v-for="(item, index) in table.columns"
            >
            </vxe-column>
            <vxe-column title="操作" width="180" fixed="right" align="left">
              <template #default="{ row }">
                <div class="text-button-group">
                  <a-button
                    type="link"
                    :disabled="isDisabled(row)"
                    @click="goTestConfig(row)"
                  >
                    试验配置
                  </a-button>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <!-- 分页 -->
        <div class="pager-container">
          <vxe-pager
            background
            :current-page.sync="pager.page"
            :page-size.sync="pager.pageSize"
            :total="pager.total"
            :layouts="[
              'PrevPage',
              'JumpNumber',
              'NextPage',
              'Sizes',
              'FullJump',
            ]"
            @page-change="paginationChange"
          >
            <template #left>
              <div class="vxe-pager-left-tip-container">
                第<span>1</span>到<span
                  >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
                >共<span>{{ pager.total }}</span
                >条记录
              </div>
            </template>
          </vxe-pager>
        </div>
      </div>
    </div>
    <!-- 实验配页面 -->
    <testConfigPage
      :visible.sync="testConfigPageVisible"
      :tenantCode="tenantCode"
    ></testConfigPage>
  </div>
</template>

<script>
import { getList } from "@/api/wisdom-beam/projectConfig.js";
//【角色管理】列表
import bjSelect from "@/components/bj-select";
//实验配页面
import testConfigPage from "./testConfig.vue";
export default {
  data() {
    return {
      tenantCode: "",
      testConfigPageVisible: false,
      pageLoading: false,
      //项目名称
      proName: undefined,
      //table
      table: {
        source: [],
        columns: [
          {
            title: "项目名称",
            dataIndex: "tenantName",
            key: "tenantName",
            width: "",
          },
          {
            title: "所属系统",
            dataIndex: "includeSystem",
            key: "includeSystem",
            width: "",
          },
        ],
      },
      //分页
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  components: {
    bjSelect,
    testConfigPage,
  },
  mounted() {
    this.getData();
  },
  methods: {
    //查询列表数据
    getData() {
      this.pageLoading = true;
      return new Promise((resolve, reject) => {
        let { pageSize, page } = this.pager;
        let { proName } = this;
        getList({ pageSize, page, tenantName: proName })
          .then((res) => {
            let { data } = res;
            this.table.source = data?.result?.rows || [];
            this.pager.total = data?.result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.table.source = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.pageLoading = false;
          });
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getData();
    },

    //判断按钮是否禁用
    isDisabled(item) {
      let { sysProject } = item;
      if (
        sysProject?.includeSystem &&
        sysProject?.includeSystem.includes("SYGLXT")
      ) {
        return false;
      }
      return true;
    },

    //试验配置
    goTestConfig(row) {
      let { tenantCode } = row;
      this.tenantCode = tenantCode;
      this.testConfigPageVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.project-config-page-container {
  height: 100%;
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 0 10px 10px;
  .conditions-container {
    flex-shrink: 0;
    /deep/.ant-input-suffix {
      right: 24px;
      margin-top: -5px;
    }
  }
  .result-container {
    .flex();
    flex-direction: column;
    flex: 1;
    .common-result-container-header {
      flex-shrink: 0;
    }
    .result-body {
      flex: 1;
      .flex();
      flex-direction: column;
      .table-container {
        flex: 1;
        .table-more-btns {
          color: var(--primary-color);
          margin-top: -20px;
          transform: translateY(-3px);
          margin-left: 20px;
          display: inline-block;
          cursor: pointer;
        }
        .status-text {
          background: #4bc964;
          border-radius: 4px;
          color: #fff;
          padding: 4px 15px;
          &.error {
            background: #ff3f4a;
          }
        }
      }
      .pager-container {
        flex-shrink: 0;
      }
    }
  }
}
</style>
